<html>
    <head>
        <title>.sync修饰符</title>
    </head>
    <body>
        <script>
            // .sync 修饰符
                         /*
                              在有些情况下，我们可能需要对一个 prop 进行 "双向绑定".
                              不幸的是，真正的双向绑定会带来维护上的问题(因为"双向绑定"使得子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源)


                              这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之、
                         */
                                // 举个例子，在一个包含 title 属性的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

                                      this.$emit('update:title',newTitle);

                        // 然后父组件可以监听那个事件，并根据需要更新一个本地的数据property:
                                /*
                                      <text-document 
                                               v-bind:title="doc.title"
                                               v-on:update:title="doc.title=$event"
                                      ></text-document>
                                */
                        // 为了方便起见，我们为这种模式提供一个缩写，就是  ".sync"修饰符
                                /*
                                     <text-doucment v-bind:title.sync="doc.title"></text-document>
                                */

                        /*
                           注意：
                                带有.sync 修饰符的 v-bind 不能喝表达式一起用(例如 v-bind:title.sync="doc.title + '!' " 是无效的)。
                                取而代之的是，你只能提供你想要绑定的property名，类似 v-model.
                        */

                        // 当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：
                                /*
                                   <text-document v-bind.sync="doc"></text-document>
                                */
                                /*
                                    这样会把 doc 对象中的每个property (如 title) 都作为一个独立的　prop 传进去，
                                    然后各自添加用于更新的v-on 监听器
                                */

                        /*
                            将 v-bind.sync 用在一个字面量的对象上，
                            例如  v-bind.sync= "{title:doc.title}"，是无法正常工作的，因为在解析一个像这样复杂的表达式的时候，有很多边缘情况需要考虑。 
                        */

                        

                                
        </script>
    </body>
</html>